<template>
  <div class="wap-container">

    <div class="header">
      实时监测
    </div>
    <div class="w-box">
      <div class="userinfo-box">
        <div class="tit">
          客户信息
        </div>
        <ul class="userinfo-details">
          <li class="clearfix">
            <label for="">
              客户名称：
            </label>
            <span>
              北京金风科创风电设备有限公司
            </span>
          </li>
          <li class="clearfix">
            <label for="">
              客户地址：
            </label>
            <span>
              北京市市辖区大兴区北京经济技术开发区康定街19号
            </span>
          </li>
          <li class="clearfix">
            <label for="">
              接入时间：
            </label>
            <span>
              2020-01-01 00:00:00
            </span>
          </li>
          <li class="clearfix">
            <label for="">
              环保机构：
            </label>
            <span>
              吕梁环保局
            </span>
          </li>
          <li class="clearfix">
            <label for="">
              联系人：
            </label>
            <span>
              崔小勤
            </span>
          </li>
          <li class="clearfix">
            <label for="">
              手机号：
            </label>
            <span>
              13122223333
            </span>
          </li>
        </ul>
      </div>
    </div>
    
    <div class="sspf-wrap" v-for="(item, index) in list" :key="index" :id="'sspf_' + index">
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit">
            实时排放（排口{{index + 1}}）
          </div>
          <ul class="userinfo-details">
            <li class="clearfix">
              <label for="">
                油烟浓度：
              </label>
              <span>
                <strong>
                  0.00
                </strong>
                <span class="unit">(mg/m3)</span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                颗粒物：
              </label>
              <span>
                <strong>
                  0.00
                </strong>
                <span class="unit">(mg/m3)</span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                NMHC：
              </label>
              <span>
                <strong>
                  0.00
                </strong>
                <span class="unit">(mg/m3)</span>
              </span>
            </li>
            <li class="clearfix small">
              <i>
                最近上报时间：
                2020-08-12 17:36:30
              </i>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit">
            净化器
          </div>
          <ul class="userinfo-details">
            <li class="clearfix">
              <label for="">
                状态：
              </label>
              <span>
                运行中
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                电压：
              </label>
              <span>
                220.4V
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                电流：
              </label>
              <span>
                11.5A
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                压差：
              </label>
              <span>
                530.6Pa
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit">
            排风机
          </div>
          <ul class="userinfo-details">
            <li class="clearfix">
              <label for="">
                状态：
              </label>
              <span>
                <span class="svg-container my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
                <!-- 运行中 -->
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                电流：
              </label>
              <span>
                57.7A
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit">
            电场(Unit2)
          </div>
          <ul class="userinfo-details">
            <li class="clearfix">
              <label for="">
                保护：
              </label>
              <span>
                <span class="svg-container my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                开路：
              </label>
              <span>
                <span class="svg-container close my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                短路：
              </label>
              <span>
                <span class="svg-container my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                开温：
              </label>
              <span>
                <span class="svg-container close my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                一次电压：
              </label>
              <span>
                220.4V
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次电压：
              </label>
              <span>
                220.4KV
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次电流：
              </label>
              <span>
                12.3mA
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次功率：
              </label>
              <span>
                134.0V
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit">
            电场(Unit1)
          </div>
          <ul class="userinfo-details">
            <li class="clearfix">
              <label for="">
                保护：
              </label>
              <span>
                <span class="svg-container my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                开路：
              </label>
              <span>
                <span class="svg-container close my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                短路：
              </label>
              <span>
                <span class="svg-container my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                开温：
              </label>
              <span>
                <span class="svg-container close my-dot">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                一次电压：
              </label>
              <span>
                220.4V
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次电压：
              </label>
              <span>
                220.4KV
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次电流：
              </label>
              <span>
                12.3mA
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                二次功率：
              </label>
              <span>
                134.0V
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit red">
            警告 20:00
          </div>
          <ul class="userinfo-details jg">
            <li class="clearfix">
              <label for="">
                油烟浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                颗粒物浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                NMHC浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                疑似故障告警：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                设备停机告警：
              </label>
              <span>
                0次
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit red">
            警告 19:00
          </div>
          <ul class="userinfo-details jg">
            <li class="clearfix">
              <label for="">
                油烟浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                颗粒物浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                NMHC浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                疑似故障告警：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                设备停机告警：
              </label>
              <span>
                0次
              </span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="w-box">
        <div class="userinfo-box">
          <div class="tit red">
            警告 18:00
          </div>
          <ul class="userinfo-details jg">
            <li class="clearfix">
              <label for="">
                油烟浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                颗粒物浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                NMHC浓度超标：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                疑似故障告警：
              </label>
              <span>
                0次
              </span>
            </li>
            <li class="clearfix">
              <label for="">
                设备停机告警：
              </label>
              <span>
                0次
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <ul class="fix-bar">
      <template v-for="(item, index) in list">
        <li :key="index">
          <a :href="'#sspf_' + index">排口{{index + 1}}</a>
        </li>
      </template>
    </ul>

  </div>
</template>

<script>
// import { getList } from '@/api/nav'
import { mapGetters } from 'vuex'

export default {
  name: 'business',
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  components: {
  },
  data() {
    return {
      btnLoading: false,
      listLoading: false,
      list: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
      ],
      listQuery: {
        page: {
          num: 1,
          total: 0,
          size: 10
        },
        item: {
          name: ''
        }
      }
    }
  },
  watch: {
    // 表单内容体
    temp: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 搜索条件体
    listQuery: {
      handler: function(val, oldVal) {
      },
      deep: true
    }
  },
  created() {
    // 取列表
    this.getList()
  },
  activated() {
    // 取列表
    this.getList()
  },
  deactivated() {
  },
  methods: {
    // 改变每页显示条数
    handleSizeChange(val) {
      this.listQuery.page.size = val
      this.getList()
    },
    // 改变当前页面
    handleCurrentChange(val) {
      this.listQuery.page.num = val
      this.getList()
    },
    // 搜索
    handleFilter() {
      this.btnLoading = true
      this.listQuery.page.num = 1
      this.getList().then(() => {
        this.btnLoading = false
      }).catch(() => {
        this.btnLoading = false
      })
    },
    // 获取列表
    getList() {
      // this.listLoading = true
      // return getList(this.listQuery).then(response => {
      //   this.list = response.data.lstItem
      //   this.listQuery.page.total = response.data.page.total
      //   this.listLoading = false
      // }).catch(err => {
      //   err
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wap-container{
  width: 100%;
  background-color: #001313;
  color: #fff;
  font-size: 1.6rem;
  .header{
    max-width: 54rem;
    margin: 0 auto;
    height: 5.1rem;
    font-size: 2.2rem;
    line-height: 5.1rem;
    text-align: center;
    // background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
  }
  .w-box{
    max-width: 54rem;
    margin: 0 auto;
    .userinfo-box{
      width: 100%;
      border-bottom: 1px solid #ddd;
      overflow: hidden;
      .tit{
        height: 6rem;
        line-height: 6rem;
        text-align: center;
        font-size: 1.8rem;
      }
      ul{
        padding-bottom: 2rem;
        li{
          // overflow: hidden;
          font-size: 1.8rem;
          line-height: 3.2rem;
          position: relative;
          padding-left: 11.5rem;
          label{
            display: block;
            float: left;
            width: 11.5rem;
            text-align: right;
            height: 100%;
            font-weight: normal;
            margin-left: -11.5rem;
          }
          > span{
            display: block;
            float: left;
            width: 100%;
            padding: 0 .5rem;
          }
        }
        li.small{
          padding-left: 2rem;
          font-size: 1.2rem;
        }
      }
      .userinfo-details.jg{
        li{
          padding-left: 15rem;
          label{
            width: 15rem;
            margin-left: -15rem;
          }
        }
      }
    }
  }
}
.my-dot{
  font-size: 2.4rem;
  color: green;
}
.my-dot.close{
  color: #f00;
}
.fix-bar{
  position: fixed;
  bottom: 2rem;
  right: .5rem;
  border-radius: .4rem;
  border: 1px solid #176b99;
  background-color: #000;
  li{
    line-height: 2rem;
    border-bottom: 1px solid #176b99;
    cursor: pointer;
    a{
      display: inline-block;
      padding: .5rem 1rem;
      font-size: 1.4rem;
    }
  }
}
</style>
